<template>
  <transition name="alert-fade">
    <div
      v-show="showAlert" 
      class="lwq-alert"
      :class="{
        [`lwq-alert--${type}`]: type,
        [`is-${effect}`]: effect,
        'is-center': center
      }"
    >
      <lwq-icon 
        v-if="showIcon" 
        class="lwq-alert__icon" 
        :class="{
          [`lwq-alert__icon--${type}`]: type
        }"
        :icon="alertIcon" 
        :size="description ? '2xl': '1x'"
      >
      </lwq-icon>
      <div class="lwq-alert__content">
        <div class="lwq-alert__title">{{ title }}</div>
        <p v-if="description" class="lwq-alert__description">{{ description }}</p>
        <template v-if="closable">
          <lwq-icon v-if="!closeText" class="lwq-alert__close" icon="close" size="xs" @click="closeAlertClick"></lwq-icon>
          <span v-else class="lwq-alert__close" @click="closeAlertClick">{{ closeText }}</span>
        </template>
      </div>
    </div>
  </transition>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import type { AlertEmits, AlertProps, AlertType } from './types';
import LwqIcon from '../Icon/Icon.vue'

defineOptions({
  name: 'LwqAlert'
});
const props = withDefaults(defineProps<AlertProps>(), {
  effect: 'light',
  closable: true
});
const showAlert = ref<boolean>(true);
const emits = defineEmits<AlertEmits>();
const alertIcon = computed(() => {
  const iconType: Record<AlertType, string> = {
    success: 'check-circle',
    warning: 'circle-exclamation',
    info: 'circle-info',
    danger: 'circle-xmark'
  }
  return iconType[props.type];
})
const closeAlertClick = () => {
  showAlert.value = false;
  emits('closeAlert', showAlert.value)
}
</script>
<style scoped>
@import './style.css';
</style>